---
title: पेज
description: Astro पेजों का एक परिचय
i18nReady: true
---

import ReadMore from '~/components/ReadMore.astro';
import Since from '~/components/Since.astro'

**पेज** वे फ़ाइलें हैं जो आपके Astro परियोजना की `src/pages/` उपनिर्देशिका में रहती हैं। वे आपकी वेबसाइट के प्रत्येक पेज के लिए रूटिंग, डेटा लोडिंग और समग्र पेज लेआउट को संभालने के लिए जिम्मेदार हैं।

## समर्थित पेज फ़ाइलें

Astro `src/pages/` निर्देशिका में निम्नलिखित फ़ाइल प्रकारों का समर्थन करता है:
- [`.astro`](#astro-पेज)
- [`.md`](#markdownmdx-पेज)
- `.mdx` ([MDX एकीकरण इंस्टॉल](/hi/guides/integrations-guide/mdx/#installation) होने के साथ)
- [`.html`](#html-पेज)
- `.js`/`.ts` ([endpoints](/hi/guides/endpoints/) की तरह)

## फ़ाइल-आधारित रूटिंग

Astro एक रूटिंग रणनीति का लाभ उठाता है जिसे **फ़ाइल-आधारित रूटिंग** कहा जाता है। आपकी `src/pages/` निर्देशिका की प्रत्येक फ़ाइल अपने फ़ाइल पथ के आधार पर आपकी साइट पर एक एंडपॉइंट बन जाती है।

[गतिशील रूटिंग](/hi/guides/routing/#dynamic-routes) का उपयोग करके एक एकल फ़ाइल कई पेज भी उत्पन्न कर सकती है। यह आपको पेज बनाने की अनुमति देता है, भले ही आपकी सामग्री विशेष `/pages/` निर्देशिका से बाहर हो, जैसे कि [सामग्री संग्रह](/hi/guides/content-collections/) या [CMS](/hi/guides/cms/) में।

<ReadMore> [Astro में रूटिंग](/hi/guides/routing/) के बारे में और पढ़ें।</ReadMore>

### पेजों के बीच लिंक

अपनी साइट के अन्य पेजों से लिंक करने के लिए अपने Astro पेजों में मानक HTML [`<a>` तत्व](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) लिखें। अपने लिंक के रूप में अपने **रूट डोमेन से संबंधित URL पथ** का उपयोग करें, संबंधित फ़ाइल पथ का नहीं।

उदाहरण के लिए, `example.com` पर किसी अन्य पेज से `https://example.com/authors/sonali/` को लिंक करने के लिए:

```astro title="src/pages/index.astro"
<a href="/authors/sonali/">सोनाली के बारे</a> में और पढ़ें।
```

## Astro पेज

Astro पेज .astro फ़ाइल एक्सटेंशन का उपयोग करते हैं और [Astro अवयवों](/hi/basics/astro-components/) के समान सुविधाओं का समर्थन करते हैं।

```astro title="src/pages/index.astro"
---
---
<html lang="en">
  <head>
    <title>मेरा आमुख पेज</title>
  </head>
  <body>
    <h1>मेरी वेबसाइट पर स्वागत है!</h1>
  </body>
</html>
```

एक पेज को एक पूर्ण HTML दस्तावेज़ तैयार करना होगा। यदि स्पष्ट रूप से शामिल नहीं किया गया है, तो Astro डिफ़ॉल्ट रूप से src/pages/ के भीतर स्थित किसी भी .astro अवयव में आवश्यक `<!DOCTYPE html>` घोषणा और `<head>` सामग्री जोड़ देगा। आप इसे [पार्शियल](#पेज-पार्शियल) पेज के रूप में चिह्नित करके प्रति-अवयव के आधार पर इस व्यवहार से ऑप्ट-आउट कर सकते हैं।

प्रत्येक पेज पर समान HTML तत्वों को दोहराने से बचने के लिए, आप सामान्य `<head>` और `<body>` तत्वों को अपने स्वयं के [लेआउट अवयवों](/hi/basics/layouts/) में स्थानांतरित कर सकते हैं। आप जितने चाहें उतने या कम लेआउट अवयवों का उपयोग कर सकते हैं।

```astro {3} /</?MySiteLayout>/
---
// src/pages/index.astro
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>मेरे पेज की सामग्री, एक लेआउट में लिपटी हुई!</p>
</MySiteLayout>
```

<ReadMore>Astro में [लेआउट अवयवों](/hi/basics/layouts/) के बारे में और पढ़ें।</ReadMore>

## Markdown/MDX पेज

Astro आपकी अंतिम वेबसाइट में `src/pages/` के अंदर किसी भी Markdown (`.md`) फ़ाइल को पेज के रूप में भी मानता है। यदि आपके पास [MDX एकीकरण इंस्टॉल](/hi/guides/integrations-guide/mdx/#installation) है, तो यह MDX (`.mdx`) फ़ाइलों के साथ भी उसी तरह व्यवहार करता है। इनका उपयोग आमतौर पर ब्लॉग पोस्ट और दस्तावेज़ीकरण जैसे टेक्स्ट-भारी पेजों के लिए किया जाता है।

`src/content/` में [Markdown और MDX पेज सामग्री के संग्रह](/hi/guides/content-collections/) का उपयोग [गतिशील रूप से पेज बनाने](/hi/guides/routing/#dynamic-routes) के लिए किया जा सकता है।

पेज लेआउट [Markdown फ़ाइलों](#markdownmdx-पेज) के लिए विशेष रूप से उपयोगी हैं। Markdown फ़ाइलें एक [लेआउट अवयव](/hi/basics/layouts/) को निर्दिष्ट करने के लिए विशेष लेआउट फ्रंटमैटर प्रॉपर्टी का उपयोग कर सकती हैं जो उनकी Markdown सामग्री को पूर्ण `<html>...</html>` पेज दस्तावेज़ में लपेट देगा।

```md {3}
---
# Example: src/pages/page.md
layout: '../layouts/MySiteLayout.astro'
title: 'मेरा Markdown पेज'
---
# शीर्षक

यह मेरा पेज है, जो **Markdown** में लिखा गया है।
```

<ReadMore>Astro में [Markdown](/hi/guides/markdown-content/) के बारे में और पढ़ें।</ReadMore>

## HTML पेज

`.html` फ़ाइल एक्सटेंशन वाली फ़ाइलें`src/pages/` निर्देशिका में रखी जा सकती हैं और सीधे आपकी साइट पर पेजों के रूप में उपयोग की जा सकती हैं। ध्यान दें कि कुछ प्रमुख Astro सुविधाएँ [HTML अवयवों](/hi/basics/astro-components/#html-अवयव) में समर्थित नहीं हैं।

## कस्टम 404 त्रुटि पेज

कस्टम 404 त्रुटि पेज के लिए, आप `/src/pages` में `404.astro` या `404.md` फ़ाइल बना सकते हैं।

यह एक `404.html` पेज का निर्माण करेगा। अधिकांश [परिनियोजन सेवाएँ](/hi/guides/deploy/) इसे ढूँढेंगी और इसका उपयोग करेंगी।

## पेज पार्शियल

<p><Since v="3.4.0" /></p>

:::caution
पेज पार्शियल का उपयोग [htmx](https://htmx.org/) या [Unpoly](https://unpoly.com/) जैसी फ्रंट-एंड लाइब्रेरी के संयोजन में किया जाना है। यदि आप निम्न-स्तरीय फ्रंट-एंड JavaScript लिखने में सहज हैं तो आप उनका उपयोग भी कर सकते हैं। इस कारण से वे एक उन्नत सुविधा हैं.

इसके अतिरिक्त, यदि अवयव में स्कोप्ड शैलियाँ या स्क्रिप्ट हैं, तो पार्शियल का उपयोग नहीं किया जाना चाहिए, क्योंकि इन तत्वों को HTML आउटपुट से हटा दिया जाएगा। यदि आपको स्कोप्ड शैलियों की आवश्यकता है, तो फ्रंटएंड लाइब्रेरी के साथ नियमित, गैर-पार्शियल पेजों का उपयोग करना बेहतर है जो सामग्री को हेड में मर्ज करना जानता है।
:::

पार्शियल भाग `src/pages/` के भीतर स्थित पेज अवयव हैं जिनका उद्देश्य पूर्ण पेजों के रूप में प्रस्तुत करना नहीं है।

इस फ़ोल्डर के बाहर स्थित अवयवों की तरह, इन फ़ाइलों में स्वचालित रूप से `<!DOCTYPE html>` घोषणा शामिल नहीं होती है, न ही कोई `<head>` सामग्री जैसे स्कोप्ड शैलियाँ और स्क्रिप्ट शामिल होती हैं।

हालाँकि, क्योंकि वे विशेष `src/pages/` निर्देशिका में स्थित हैं, उत्पादित किया गया HTML इसके फ़ाइल पथ के अनुरूप URL पर उपलब्ध है। यह एक रेंडरिंग लाइब्रेरी (उदाहरण के लिए htmx, Stimulus, jQuery) को क्लाइंट पर इसे एक्सेस करने और ब्राउज़र रिफ्रेश या पेज मार्ग-निर्देशन के बिना किसी पेज पर HTML के अनुभागों को गतिशील रूप से लोड करने की अनुमति देता है।

पार्शियल, जब एक रेंडरिंग लाइब्रेरी के साथ जोड़ा जाता है, तो Astro  में गतिशील सामग्री के निर्माण के लिए [Astro द्वीप](/hi/concepts/islands/) और [`<script>` टैग](/hi/guides/client-side-scripts/) का एक विकल्प प्रदान करता है।

पेज फ़ाइलें जो एक मान निर्यात कर सकती हैं (उदाहरण के लिए `.astro` , `.mdx`) को पार्शियल के रूप में चिह्नित किया जा सकता है।

निम्नलिखित निर्यात जोड़कर `src/pages/` निर्देशिका के भीतर एक फ़ाइल को पार्शियल रूप से कॉन्फ़िगर करें:

```astro title="src/pages/partial.astro" ins={2}
---
export const partial = true;
---

<li>मैं पार्शियल हूँ!</li>
```

`export const partial` को सांख्यिकीय रूप से पहचाना जाना चाहिए। इसका मूल्य हो सकता है:

- boolean __`true`__.
- import.meta.env जैसे `import.meta.env.USE_PARTIALS` का उपयोग करने वाला एक एनवायरनमेंट चर।

### लाइब्रेरी के साथ प्रयोग करना

 पार्शियल का उपयोग पेज के एक अनुभाग को गतिशील रूप से अद्यतन करने के लिए किया जाता है [htmx](https://htmx.org/) जैसी लाइब्रेरी का उपयोग करके।

 निम्नलिखित उदाहरण एक `hx-post` विशेषता को पार्शियल URL पर सेट दिखाता है। पार्शियल पेज की सामग्री का उपयोग इस पेज पर लक्षित HTML तत्व को अद्यतन करने के लिए किया जाएगा।

```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
<html>
  <head>
    <title>मेरा पेज</title>
    <script src="https://unpkg.com/htmx.org@1.9.6"
      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
      crossorigin="anonymous"></script>
  </head>
</html>
<section>
  <div id="parent-div">यहां लक्ष्य करें</div>

  <button hx-post="/partials/clicked/"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="innerHTML"
  >
      मुझे क्लिक करें!
  </button>
</section>
```

`.Astro` पार्शियल संबंधित फ़ाइल पथ पर मौजूद होना चाहिए, और पेज को पार्शियल के रूप में परिभाषित करने वाला एक निर्यात शामिल होना चाहिए:

```astro title="src/pages/partials/clicked.astro" {2}
---
export const partial = true;
---
<div>मुझे क्लिक किया गया!</div>
```

htmx का उपयोग करने के बारे में अधिक जानकारी के लिए [htmx दस्तावेज़](https://htmx.org/docs/) देखें।
